<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-table
        :data="userList"
        style="width: 100%" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户姓名">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="电话">
              <span>{{ props.row.userTel }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.userSex == 0 ? '女' : props.row.userSex == 1 ? '男' : '未知' }}</span>
            </el-form-item>
            <el-form-item label="积分">
              <span>{{ props.row.userIntegral }}</span>
            </el-form-item>
            <el-form-item label="配送地址">
              <el-select v-model="props.row.userAddress.address" placeholder="点击查看地址列表">
                <el-option
                    v-for="item in props.row.userAddress"
                    :key="item.address"
                    :label="item.address"
                    :value="item.address">
                </el-option>
              </el-select>
              <!--              <ul class="infinite-list"  style="overflow:auto " >-->
              <!--                <li v-for="i in props.row.userAddress" class="infinite-list-item">{{ i.address}}</li>-->
              <!--              </ul>-->
            </el-form-item>

          </el-form>
          <el-button type="warning" round @click="updateUser(props.row.userid)">修改</el-button>
          <el-button type="danger" round @click="delUser(props.row.userid)">删除</el-button>

        </template>
      </el-table-column>
      <el-table-column
          label="用户名单"
          prop="username">
      </el-table-column>

    </el-table>
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="user">
        <el-form-item label="姓名">
          <el-input v-model="user.username">></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="user.userPassword">></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="conpass">></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="user.userTel"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="user.userSex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="conUpdate()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
export default {
  created() {
    this.listUserParam()
  }, data() {
    return {
      userCount: 0,
      userList: [],
      userParamList: [],
      dialogFormVisible: false,
      user: {
        userId: 0,
        username: '',
        userPassword: '',
        userSex: 0,
        userTel: '',
        userAddress: {
          addressId: 0,
          userId: 0,
          address: ''
        }
      },
      value: '',
      userAddressList: [],
      conpass: 0,
      formLabelWidth: '120px',
      address: '地址'
    }
  }, methods: {
    // 查询所有
    listAll() {
      this.$http.get('demo/users/listAll', {
        // 解构赋值
      }).then(({data: res}) => {
        this.userList = res.data
        // console.log(res)
      }).catch(() => {

      })

    }, Address(id) {
      this.$http.get('demo/useraddress/getByUserId', {
        params: {usersId: id}
        // 解构赋值
      }).then(({data: res}) => {
        this.address = res.data
        // console.log(res)
      }).catch(() => {

      })
    },
    //根据ID删除用户
    delUser(index) {
      this.$http.delete('/demo/users/delete', {params: {id: index}}).then(({data: res}) => {
        console.log(res)
        if (res == 1) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        }
        this.listUserParam()
      }).catch(() => {
      })
    },
    // 根据ID 查询用户信息
    updateUser(id) {
      this.dialogFormVisible = true;
      this.Address(id);
      this.$http.get('demo/users/getById', {params: {id: id}}).then(({data: res}) => {
        this.user = res.data
        console
            .log(res)
      }).catch(() => {

      })
    }, conUpdate() {
      this.dialogFormVisible = false
      this.$http.put('demo/users/update', this.user).then(({data: res}) => {
        console.log(res)
        if (res == 1) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        this.listUserParam()

      }).catch(() => {

      })
    }, listUserParam() {
      this.$http.get('demo/users/getParam', {}).then(({data: res}) => {
        this.userList = res.data
        this.userAddressList = res.data
      }).catch(() => {
      })
    }

  }
}
</script>
<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>